<template>
  <!-- 2025-06-19 -->
  <!-- @name:收支列表 -->
  <div class="finance-table">
    <!-- 顶部汇总信息 -->
    <van-cell-group>
      <van-cell>
        <template #title>
          <span class="sum-title"><van-icon name="chart-trending-o" />本月汇总</span>
        </template>
      </van-cell>
      <van-cell title="期初余额" class="sum-cell" :value="incomeData.qcye" />
      <van-cell title="本月收入" class="sum-cell" :value="incomeData.byJie" />
      <van-cell title="本月支出" class="sum-cell" :value="incomeData.byDai" />
      <van-cell title="本月余额" class="sum-cell" :value="incomeData.byye" />
    </van-cell-group>
    <!-- 明细信息 -->
    <van-divider>以下是明细</van-divider>
    <van-collapse v-model="activeNames" class="collapse">
      <van-collapse-item v-for="(item, index) in incomeData.list" :key="index" :name="index">
        <template #title>
          <div class="collapse-title"><van-icon name="bill-o" />{{item.zy}}</div>
        </template>
        <template #value>
          <span class="collapse-title">{{item.dt}}</span>
        </template>
        <van-cell-group>
          <van-cell title="收入" class="detail-cell" :value="item.jie" />
          <van-cell title="支出" class="detail-cell" :value="item.dai" />
          <van-cell title="余额" class="detail-cell" :value="item.ye" />
          <van-cell title="经手人" class="detail-cell" :value="item.jzy" />
          <van-cell title="审批人" class="detail-cell" :value="item.shy" />
        </van-cell-group>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue';
import { IIncome, IIncomeDetail } from '@/interface/income';

const props = defineProps({
  incomeData: {
    type: Object as () => IIncome,
    default: () => ({
      qcye: 0,
      byJie: 0,
      byDai: 0,
      byye: 0,
      list: []
    }),
  }
})

watch(
  () => props.incomeData,
  () => {
    activeNames.value = props.incomeData.list.map((item, index) => index);
  }
);

const activeNames = ref<number[]>([]);

onMounted(() => {
  activeNames.value = props.incomeData.list.map((item, index) => index);
});

</script>
<style lang="less" scoped>
.finance-table {
  padding: 12px;
  background-color: #f7f8fa;
}

:deep(.van-divider) {
  margin: 5px 0;
}

.collapse {
  margin-top: 8px;
  .collapse-title {
    font-weight: bold;
    color: #2b1401;
  }
  :deep(.van-collapse-item__content) {
    padding: 1px 3px 0 3px;
  }
  :deep(.van-cell-group[data-v-6d336ddd]:last-child) {
    margin-top: 0;
  }
}

.sum-title {
  font-size: 16px;
  font-weight: bold;
}

.sum-cell :deep(.van-cell__value) {
  color: #07c160;
  font-weight: bold;
}

/* 金额样式 */
.detail-cell :deep(.van-cell__value) {
  color: #07c160;
  font-weight: bold;
}

.van-cell-group:last-child {
  margin-top: 10px;
  border-radius: 8px;
  overflow: hidden;
}

</style>
